Formation Concevoir des animations SVG
Concevoir des animations SVG
La formation « Concevoir des animations SVG » vous permettra de réaliser des animations multimédia interactives riches et les publier dans un site Web en utilisant principalement le langage HTML5 / Canva / SVG. Le programme est donné à titre indicatif et sera adapté à vos besoins et votre niveau après audit. N’hésitez pas à nous contacter pour toute demande spécifique.
En résumé
Distanciel
Présentiel
Pré-requis
Avoir une bonne connaissance de la création de page Web (HTML et CSS). Avoir des notions de base JavaScript. Maitriser un logiciel de dessin vectoriel (Illustrator, Inkscape...) est un plus.
Public concerné
Tout public
Lieux
Formation intra-entreprise au sein de votre établissement ou dans nos locaux de LA ROCHELLE (Charente-Maritime), NIORT (Deux-Sèvres) ou POITIERS (Vienne)
Téléchargement
Télécharger le programme de formation au format PDF
Contenu de la formation
- Matriciel
- Vectoriel
- Insertion classique et data URI
- SVG vs Canva
- Déclaration vs programmation
- Intérêt du DOM SVG
- Les modes d'insertion dans une page HTML
- Les outils : Illustrator, Inkscape...
- Optimiser les exports
- Déclaration XML
- ViewBox
- Les formes simples : lignes, rectangles, ellipses
- Les formes complexes : polygones et lignes polygonales
- Filtres SVG
- Texte en ligne
- L'élément
- Propriétés CSS
- Alignement Décalage et rotation
- Compatibilité des navigateurs
- Éléments animables
- Balises d'animation
- Attributs des balises Interactions
- Scripts internes : balise
- Scripts externes
- Évènements
- Fonctions
- Appliquer un style CSS
- Attributs de présentation et CSS
- Propriétés CSS de SVG
- Attribut "style"
- Balise : dans le ou dans la page Ordre d'application des styles
- Points d'origine des éléments
- Le module de propriétés "transition"
- Le module de propriétés "animation"
- La fonction translate
- Définir les étapes avec keyframes
- Pseudo-classes de déclenchement
- Écouter les évènements d'animation avec JavaScript
- D3.js
- SVGator
- Snap.svg
- GreenSock